<template>
  <div>
    <t-table :data="data" :columns="FANS_COLUMNS" row-key="user_id" vertical-align="top" :hover="true"
      :pagination="pagination" :loading="dataLoading" :selected-row-keys="selectedRowKeys"
      @page-change="rehandlePageChange">
      <template #nick="{ row }">
        <t-space direction="horizontal" style="align-items: center;">
          <t-avatar v-if="row.avatar!=='undefined'&&row.avatar!==''" :image="row.avatar"></t-avatar>
          <t-avatar v-else>{{row.nick}}</t-avatar> {{row.nick}}
          </t-space>

      </template>

      <template #grade="{ row }">
        <t-tag v-if="row.grade === 0" variant="light"> 会员 </t-tag>
        <t-tag v-if="row.grade === 1" variant="light"> 月卡 </t-tag>
        <t-tag v-if="row.grade === 2" variant="light"> 年卡 </t-tag>
        <t-tag v-if="row.grade === 3" variant="light"> 周卡 </t-tag>
        <t-tag v-if="row.grade === 4" variant="light"> 终身VIP </t-tag>
      </template>

      <!-- <template #op="slotProps">
          <a v-if="slotProps.row.order_status!=5" class="t-button-link" @click="queryOrderPayInfo(slotProps)">查支付结果</a>
        </template> -->
    </t-table>

  </div>
</template>

<script setup type="ts">
  import { ref,reactive, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { MessagePlugin } from 'tdesign-vue-next';
  import { getFansList} from '@/api/user';
  import { prefix } from '@/config/global';
  import {FANS_COLUMNS} from './constants'


const data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});
const dataLoading = ref(false);
const confirmVisible = ref(false);
const selectedRowKeys = ref([]);
const drawerVisible = ref(false);
const fetchData =  (paginationInfo) => {
  dataLoading.value = true;
  getFansList(paginationInfo).then(ret=>{
     const {items,totalItems,currentPage}=ret
     data.value = items;
     pagination.total = totalItems;
     pagination.current = currentPage;

  }).catch(e=>{
    console.log('e  ',JSON.stringify(e))

  }).finally(()=>{
    dataLoading.value = false;
  })

};
fetchData({
    page: pagination.current,
    pageSize: pagination.pageSize,
  });
// 刷新数据
const refresh = async () => {
  pagination.current = 1;
  await fetchData(pagination);
};
const rehandlePageChange = (pageInfo) => {
  console.log(`rehandlePageChange${JSON.stringify(pageInfo)}`);
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  fetchData({page:pageInfo.current,pageSize:pageInfo.pageSize});
};

const queryOrderPayInfo=(d)=>{
  var info=d.row
  payQuery(info)
  .then(ret=>{
    let i= data.value.findIndex(o=>o.orderno===info.orderno)
    if(i!==-1)
    {
      data.value[i]=ret
    }
    MessagePlugin.success("己发起请求")
  }).catch(e=>{
    MessagePlugin.error(e.msg)
  })
}

</script>
